<template>
  <view class="package center" v-for="item in frinedList" :key='item.id' @click="jump(item.id,item)"
    :style="{border:userID==item.id?'1px solid #1B91FF':''}">
    <image :src="item.avatar?item.avatar:item.driver_avatar" mode=""></image>
    <view class="direction-start" style="width:75%">
      <view>
        {{item.name?item.name:item.nickname?item.nickname:item.driver_name}}（{{item.driver_id?item.driver_id:item.id}}）
      </view>
      <view style="margin-top:10rpx;" @click="telCall(item.mobile?item.mobile:item.driver_mobile)">
        {{item.mobile?item.mobile:item.driver_mobile}}
      </view>
    </view>
    <view class="flex-end" v-if="show" @click.stop="del(item.id,item.driver_id)"><uni-icons type="trash"
        size="28"></uni-icons></view>
  </view>
</template>

<script setup lang="ts">
  import { telCall } from '@/utils/copyText';
  const props = defineProps({
    frinedList: { type: Array },
    userID: { type: Number },
    show: { type: Boolean }
  });
  const emit = defineEmits(['jump', 'del']);
  function jump(num : number, item : any) {
    emit('jump', num, item)
  }
  function del(id : number, driverId : number) {
    emit('del', id, driverId)
  }
</script>

<style scoped lang="less">
  .package:nth-of-type(1) {
    margin-top: 0px;
  }

  .center {
    image {
      width: 97rpx;
      height: 97rpx;
      background: #DADADA;
      border-radius: 5px;
      margin-right: 20rpx;
    }
  }
</style>